<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <title>电影列表jq</title>
</head>
<style>
    tbody tr td {
        text-align: center;
    }
</style>

<body>
    电影名称:<input type="text" class="film_name"> 电影评分:
    <input type="text" class="film_score"> 电影年份:
    <input type="text" class="film_year"><button class="film_add">添加</button>
    <table>
        <thead>
            <tr>
                <th>电影名称</th>
                <th>电影评分</th>
                <th>电影年份</th>
                <th>相关操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>
<script>
    $(function() {
        var tbody = $("tbody");
        var add = $(".film_add");
        add.on("click", function(e) {
            var name = $(".film_name").val();
            var score = $(".film_score").val();
            var year = $(".film_year").val();

            if (name != "" && score != "" && year != "") {
                var content = "<tr><td>" + name + "</td><td>" + score + "</td><td>" + year + "</td><td>" + "<button class='film_delete'>删除</button>" + "</td></tr>"
                var jContent = $(content);
                jContent.appendTo(tbody);

                var deletes = $(".film_delete");
                deletes.off("click");
                deletes.on("click", function(e) {
                    var tr = $(this).parents("tr");
                    tr.remove();
                })
            } else {
                var contents = "<tr><td>请电影数据添加完整</td></tr>"
                var jContent = $(contents);
                jContent.appendTo(tbody);
            }


        })
    })
</script>

</html>